
"use server"

import { APICaptcha } from "@/app/api/login/login"
import ImageCookie from "@/componets/ImageCookie"

//使用try-catch返回意料之外的情况。如服务器后端崩溃、用户请求超时。不至于因为种种原因导致前端
async function getImage(){
    let result 
    try{
       result =  await APICaptcha()
       return result.data as unknown as Array<string>
    }
    catch(err){
        return [`<span style='color: rgb(218, 26, 26);font-size:13px;'>验证码加载出错：${err}<span>`,'no-captcha']
    }
}

/**
 * 将后台传回的<svg>标签字符串当成HTML处理
 */
const HtmlString = ({ html }:{html:string}) => (
    <div dangerouslySetInnerHTML={{ __html: html }} />
);

/**
 * 
 * @returns 图片验证码组件
 * 尝试了各种方法，最终无法再服务端组件设置cookie，故采用服务端组件中嵌套客户端组件设置
 */
export default async function ImageCode() {
    const value = await getImage()
    return(
        <>
        <HtmlString  html={value[0]}></HtmlString>
        <ImageCookie cookie={value[1]}></ImageCookie>
        </>
    )
}